<template>
    <div class="hospital-list-page">
        <!-- 顶部导航 -->
        <page-header title="医院列表">
            <template #right>
                <van-icon name="search" size="20" @click="onSearch" />
            </template>
        </page-header>

        <!-- 筛选条件 -->
        <hospital-filter ref="filterRef" @filter-change="onFilterChange" />

        <!-- 医院列表 -->
        <div class="list-container">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <hospital-item v-for="hospital in hospitals" :key="hospital.id" :hospital="hospital" />
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import PageHeader from '@/components/common/PageHeader.vue'
import HospitalFilter from '@/components/hospital/HospitalFilter.vue'
import HospitalItem from '@/components/hospital/HospitalItem.vue'
const router = useRouter()
const filterRef = ref<InstanceType<typeof HospitalFilter> | null>(null)

// 列表相关状态
const hospitals = ref<any[]>([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const page = ref(1)
const pageSize = 10

// 模拟医院数据
const mockHospitals = [
    {
        id: 1,
        name: '北京协和医院',
        image: '/images/hospital1.jpg',
        level: '三甲',
        type: '综合医院',
        address: '北京市东城区帅府园1号'
    },
    {
        id: 2,
        name: '北京大学第一医院',
        image: '/images/hospital2.jpg',
        level: '三甲',
        type: '综合医院',
        address: '北京市西城区西什库大街8号'
    },
    {
        id: 3,
        name: '中国人民解放军总医院',
        image: '/images/hospital3.jpg',
        level: '三甲',
        type: '综合医院',
        address: '北京市海淀区复兴路28号'
    }
]

// 搜索
const onSearch = () => {
    router.push('/search?type=hospital')
}

// 筛选变化
const onFilterChange = () => {
    // 重置列表
    page.value = 1
    hospitals.value = []
    finished.value = false
    onLoad()
}

// 上拉加载
const onLoad = () => {
    // 如果是刷新触发的,重置页码
    if (refreshing.value) {
        hospitals.value = []
        page.value = 1
        refreshing.value = false
    }

    // 模拟网络请求
    setTimeout(() => {
        // 模拟数据
        const newData = [...mockHospitals]

        hospitals.value.push(...newData)

        loading.value = false

        // 判断是否已加载完毕
        if (hospitals.value.length >= mockHospitals.length) {
            finished.value = true
        } else {
            page.value++
        }
    }, 1000)
}

// 下拉刷新
const onRefresh = () => {
    finished.value = false
    loading.value = true
    onLoad()
}
</script>

<style scoped lang="scss">
.hospital-list-page {
    min-height: 100vh;
    //padding-top: 46px; // 为顶部导航栏预留空间
    background: #f5f5f5;

    .list-container {
       margin-top: 2px; // 为筛选栏预留空间
    }
}
</style>